﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>jQuery ScrollPagination</title>
    <script type="text/javascript" src="scripts/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="scripts/scrollpagination.js"></script>
    <link href="styles/scrollpagination_demo.css" rel="stylesheet" media="screen"/>
    <script type="text/javascript">
        $(function () {
            $('#content').scrollPagination({
                contentPage: "doAction.php",
                contentData: {str: '呵呵'},
                scrollTarget: $(window),
                heightOffset: 5,
                clickTarget:$("#moreresults"),
                beforeLoad: function () {
                    $('#moreresults').html("载入中...");
                },
                afterLoad: function (elementsLoaded) {
                    var msg="点击获取更多";
                    $(elementsLoaded).fadeInWithDelay();
                    if ($('#content').children().size() > 10) {
                        msg="没有更多了";
                        $('#content').stopScrollPagination();
                    }
                    $("#moreresults").html(msg);
                },
                loader: function (data) {
                    $.each(data, function (index, entry) {
                        $("#content").append(entry);
                    });
                }
            });
        });
    </script>
</head>
<body>
<div id="scrollpaginationdemo">
    <ul id="content">
        <li><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc elementum elementum felis. Quisque porta
            turpis nec eros consectetur lacinia. Pellentesque sagittis adipiscing egestas. </p></li> <li><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc elementum elementum felis. Quisque porta
        turpis nec eros consectetur lacinia. Pellentesque sagittis adipiscing egestas. </p></li> <li><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc elementum elementum felis. Quisque porta
        turpis nec eros consectetur lacinia. Pellentesque sagittis adipiscing egestas. </p></li> <li><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc elementum elementum felis. Quisque porta
        turpis nec eros consectetur lacinia. Pellentesque sagittis adipiscing egestas. </p></li> <li><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc elementum elementum felis. Quisque porta
        turpis nec eros consectetur lacinia. Pellentesque sagittis adipiscing egestas. </p></li> <li><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc elementum elementum felis. Quisque porta
        turpis nec eros consectetur lacinia. Pellentesque sagittis adipiscing egestas. </p></li>
    </ul>
    <div class="loading" id="moreresults" style="display:block;cursor:pointer" >获取更多</div>
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</body>
</html>
